<script setup lang="ts">
import {ref,onMounted,PropType,defineEmits} from 'vue'
import AnswerSheet from './answer_sheet.vue'
import {SheetItem, get_year_answer_sheet} from './answer_sheet'
import { YearProgress,get_years_progress } from './progress'

const emit=defineEmits(['sheet-selected'])

const current_expanding=ref(-1)
const progress_array=ref([] as  Array<YearProgress>)
const sheet_of_years=ref(new Map() as Map<number,Array<SheetItem>>)
const is_loaded=ref(false)

onMounted(async ()=>{
  progress_array.value=await get_years_progress()
  console.log('Get progress of years:')
  console.dir(progress_array.value)
  is_loaded.value=true
})

const item_expand=async (item_name:string)=>{
  console.log(`Item[${item_name}] is expanded.`)
  const year=+item_name
  current_expanding.value=year
  if (!is_loading(year)) {
    return
  }
  const answersheet=await get_year_answer_sheet(year)
  console.log(`Get answersheets of year[${year}]`)
  console.dir(answersheet)
  sheet_of_years.value.set(year,answersheet)

}
const is_loading=(year:number)=>{
  let flag= sheet_of_years.value.has(year)
  // console.log('Answeet of')
  return !flag
}

const number_to_percent=(n:number)=>{
  return ((n*100).toFixed(0))+'%'
}

const sheet_selected=(qid:number)=>{
  console.log('Select sheet of year:'+current_expanding.value)
  console.log('Question id of sheet:'+qid)
  emit('sheet-selected',sheet_of_years.value.get(current_expanding.value),qid)
}
</script>

<template>
<el-scrollbar height="100%" v-loading="!is_loaded" element-loading-background="#000">
  <el-collapse accordion @change="item_expand">
    <el-collapse-item v-for="progress in progress_array" :key="progress.year" :name="progress.year">
      <template #title>
        <div class="item-title">
          <span v-if="progress.undo_percent==0">✅</span>
          <span v-else>☑️</span>
          <h1>{{progress.year}}</h1>
          <div class="progress card">
            <span class="label">完成率</span>
            <span class="value">{{number_to_percent(1-progress.undo_percent)}}</span>
          </div>
          <div class="accuracy card">
            <span class="label">正确率</span>
            <span class="value">{{number_to_percent(progress.right_percent)}}</span>
          </div>
        </div>
      </template>
      <AnswerSheet 
      @question-selected="sheet_selected"
      v-if="current_expanding==progress.year"
      :sheet="sheet_of_years.get(progress.year)" 
      v-loading="is_loading(progress.year)"
      ></AnswerSheet>
    </el-collapse-item>
  </el-collapse>
  </el-scrollbar>
</template>

<style scoped lang="scss">

.el-collapse{
  background-color: transparent;
}
.el-collapse-item{
  --el-collapse-header-bg-color:#333;
  --color:aliceblue;
  --el-collapse-content-bg-color:#333;
}
.item-title{
  width: 100%;
  display: grid;
  grid-template-columns: 20px 80px auto auto;
  column-gap: 10px;
  align-items: center;
  justify-content: start;
  h1{
    color: aliceblue;
    font-size: 1.2rem;
    text-shadow: 2px 2px dodgerblue;
    text-align: left;
    width: 100%;
  }
  .card{
    border: 1px solid dodgerblue;
    height: 20px;
    border-radius: 5px;
    display: flex;
    width: 102px;
    // align-items: center;
    // overflow: hidden;
    padding:0;
    span{
      color: aliceblue;
      height: 20px;
      line-height: 20px;
      border: none;
    }
    .label{
      background-color: dodgerblue;
      color: #333;
      width: 60px;
    }
    .value{
      width: 40px;
    }
    &.accuracy {
      border-color: chartreuse;
      .label{
        background-color: chartreuse;
      }
    }
  }
}
</style>
